<template>
  <div class="home m-b">
    <div class="mapBox">
      <div class="title">iBEM Lab 项目分布可视化概览</div>
      <chinaMap :mapData="mapData"></chinaMap>
    </div>
    <div id="banner"
         class="case-box">
      <div class="title">典型案例展示</div>
      <!--动态将图片轮播图的容器高度设置成与图片一致-->
      <el-carousel :height="imgHeight+'px'"
                   style="padding:0 50px 0 50px;margin:auto"
                   :autoplay="false"
                   :loop="false">
        <el-carousel-item v-for="(item,index) in imgKeys2"
                          :key="index">
          <div ref="imgGroup">
            <el-row :gutter="10">
              <el-col :span="6"
                      v-for="(item2,index2) in item"
                      :key="item2.httpUrl+index2">
                <!-- <img class="banner-img" ref="img" :src="imgKeys[index]" /> -->
                <div class="banner-img">
                  <div class="banner">
                    <img ref="img"
                         :src="item2.httpUrl" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import chinaMap from "./map";
import { statistic } from "@/api/home";
import { setImages, getImagesKeys } from "@/api/carouselManage";
import { getImg } from "@/api/common";
export default {
  name: "hello",
  components: {
    chinaMap
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      imgKeys: [],
      imgKeys2: [],
      imgHeight: 200,
      myChart: null,
      mapData: []
    };
  },
  mounted() {
    this.getData();
    this.imgHeight = ((document.body.clientWidth - 240 * 1) / 4) * 0.55;
    console.log(this.imgHeight);

    window.addEventListener("resize", this.resizeHandler);
    this.details();
  },
  beforeDestroy() {
    // 清理工作 避免内存泄漏
    // 销毁监听事件
    window.removeEventListener("resize", this.resizeHandler);
  },
  methods: {
    getImgFun(val) {
      let data = {
        key: val
      };
      getImg(data).then(res => {
        for (let i = 0; i < this.imgKeys.length; i++) {
          if (this.imgKeys[i].imgkey == val) {
            this.imgKeys[i].httpUrl = res.value;
          }
        }
        this.handlerData();
      });
    },
    handlerData() {
      let newDataList = [];
      let current = 0;
      if (this.imgKeys && this.imgKeys.length > 0) {
        for (let i = 0; i <= this.imgKeys.length - 1; i++) {
          if (i % 4 !== 0 || i === 0) {
            if (!newDataList[current]) {
              newDataList.push([this.imgKeys[i]]);
            } else {
              newDataList[current].push(this.imgKeys[i]);
            }
          } else {
            current++;
            newDataList.push([this.imgKeys[i]]);
          }
        }
      }
      this.imgKeys2 = [...newDataList];
    },
    getData() {
      getImagesKeys().then(res => {
        this.formData = res.value;
        for (let i = 0; i < this.formData.images.length; i++) {
          const element = this.formData.images[i];
          this.imgKeys.push({ imgkey: element, httpUrl: "" });
          this.getImgFun(element);
        }
      });
    },
    details() {
      statistic().then(res => {
        if (res["code"] == 200) {
          if (res.value) {
            this.mapData = res.value;
          }
        }
      });
    },
    resizeHandler() {
      this.imgHeight = this.$refs.imgGroup[0].offsetHeight;
    }
  }
};
</script>
<style>
.el-carousel__indicators--horizontal {
  display: none;
}
</style>
<style lang="scss" scoped>
.mapBox {
  width: 100%;
  // display: flex;
  // justify-content: center;
}
</style>
<style lang="scss" scoped>
.home {
  background-size: cover;
  border-radius: 4px;
  .mapBox {
    background-image: url("../../assets/images/home/map_bg.png");
    // background-size: 100% 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    .title {
      width: 100%;
      font-size: 24px;
      font-weight: 400;
      line-height: 64px;
      font-weight: 700;
      font-size: 28px;
      line-height: 37px;
      background: linear-gradient(180deg, #0064c0 51.04%, #008bec 55.73%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      text-align: center;
      // position: absolute;
    }
  }
  .case-box {
    margin-top: 16px;
    padding: 16px;
    border-radius: 4px;
    background-color: #fff;
    .title {
      font-weight: 700;
      font-size: 16px;
      line-height: 21px;
      color: #000000;
      margin-bottom: 16px;
    }
  }
  .banner-img {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    .bg {
      width: 100%;
    }
    .banner {
      width: 100%;
      overflow: hidden;
      img {
        width: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
